<!DOCTYPE html>
<!-- saved from url=(0052)http://flatfull.com/themes/angulr/angular/#/app/docs -->
<html lang="en" data-ng-app="app" class="ng-scope">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">@charset "UTF-8";
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
        display: none !important;
    }

    ng\:form {
        display: block;
    }</style>
    <meta charset="utf-8">
    <title>Angular version | Angulr</title>
    <meta name="description"
          content="app, web app, responsive, responsive layout, admin, admin panel, admin dashboard, flat, flat ui, ui kit, AngularJS, ui route, charts, widgets, components">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./assets/app.min.css" type="text/css">
    <script src="./assets/chart.js" async=""></script>
    <style type="text/css">.jqstooltip {
        position: absolute;
        left: 0px;
        top: 0px;
        visibility: hidden;
        background: rgb(0, 0, 0) transparent;
        background-color: rgba(0, 0, 0, 0.6);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
        color: white;
        font: 10px arial, san serif;
        text-align: left;
        white-space: nowrap;
        padding: 5px;
        border: 1px solid white;
        z-index: 10000;
    }

    .jqsfield {
        color: white;
        font: 10px arial, san serif;
        text-align: left;
    }</style>
</head>
<body ng-controller="AppCtrl" style="" class="ng-scope">
<!-- uiView:  -->
<div class="app ng-scope app-header-fixed" id="app"
     ng-class="{&#39;app-header-fixed&#39;:app.settings.headerFixed, &#39;app-aside-fixed&#39;:app.settings.asideFixed, &#39;app-aside-folded&#39;:app.settings.asideFolded, &#39;app-aside-dock&#39;:app.settings.asideDock, &#39;container&#39;:app.settings.container}"
     ui-view="">  <!-- navbar -->
    <!-- ngInclude: 'tpl/blocks/header.html' -->
    <div data-ng-include=" &#39;tpl/blocks/header.html&#39; " class="app-header navbar ng-scope"><!-- navbar header -->
        <div class="navbar-header bg-black">
            <button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
                <i class="glyphicon glyphicon-cog"></i>
            </button>
            <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
                <i class="glyphicon glyphicon-align-justify"></i>
            </button>
            <!-- brand -->
            <a href="http://flatfull.com/themes/angulr/angular/#/" class="navbar-brand text-lt">
                <i class="fa fa-btc"></i>
                <img src="./assets/logo.png" alt="." class="hide">
                <span class="hidden-folded m-l-xs ng-binding">Angulr</span>
            </a>
            <!-- / brand -->
        </div>
        <!-- / navbar header -->

        <!-- navbar collapse -->
        <div class="collapse pos-rlt navbar-collapse box-shadow bg-white-only">
            <!-- buttons -->
            <div class="nav navbar-nav hidden-xs">
                <a href="" class="btn no-shadow navbar-btn"
                   ng-click="app.settings.asideFolded = !app.settings.asideFolded">
                    <i class="fa fa-dedent fa-fw"></i>
                </a>
                <a href="" class="btn no-shadow navbar-btn" ui-toggle-class="show" target="#aside-user">
                    <i class="icon-user fa-fw"></i>
                </a>
            </div>
            <!-- / buttons -->

            <!-- link and dropdown -->
            <ul class="nav navbar-nav hidden-sm">
                <li class="dropdown pos-stc" dropdown="">
                    <a href="" class="dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
                        <span>Mega</span>
                        <span class="caret"></span>
                    </a>

                    <div class="dropdown-menu wrapper w-full bg-white">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="m-l-xs m-t-xs m-b-xs font-bold">Pages <span
                                        class="badge badge-sm bg-success">10</span></div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <ul class="list-unstyled l-h-2x">
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Profile</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Post</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Search</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Invoice</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-6">
                                        <ul class="list-unstyled l-h-2x">
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Price</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Lock
                                                    screen</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign
                                                    in</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign
                                                    up</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 b-l b-light">
                                <div class="m-l-xs m-t-xs m-b-xs font-bold">UI Kits <span
                                        class="label label-sm bg-primary">12</span></div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <ul class="list-unstyled l-h-2x">
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Buttons</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Icons
                                                    <span class="badge badge-sm bg-warning">1000+</span></a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Grid</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Widgets</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-6">
                                        <ul class="list-unstyled l-h-2x">
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Bootstap</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sortable</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Portlet</a>
                                            </li>
                                            <li>
                                                <a href=""><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Timeline</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 b-l b-light">
                                <div class="m-l-xs m-t-xs m-b-sm font-bold">Analysis</div>
                                <div class="text-center">
                                    <div class="inline">
                                        <div ui-jq="easyPieChart" ui-options="{
                          percent: 65,
                          lineWidth: 50,
                          trackColor: &#39;#e8eff0&#39;,
                          barColor: &#39;#23b7e5&#39;,
                          scaleColor: false,
                          size: 100,
                          rotate: 90,
                          lineCap: &#39;butt&#39;,
                          animate: 2000
                        }" class="easyPieChart" style="width: 100px; height: 100px; line-height: 100px;">
                                            <canvas width="100" height="100"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="dropdown" dropdown="">
                    <a href="" class="dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
                        <span translate="header.navbar.new.NEW" class="ng-scope">New</span> <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="http://flatfull.com/themes/angulr/angular/#" translate="header.navbar.new.PROJECT"
                               class="ng-scope">Projects</a></li>
                        <li>
                            <a href="">
                                <span class="badge bg-info pull-right">5</span>
                                <span translate="header.navbar.new.TASK" class="ng-scope">Task</span>
                            </a>
                        </li>
                        <li><a href="" translate="header.navbar.new.USER" class="ng-scope">User</a></li>
                        <li class="divider"></li>
                        <li>
                            <a href="">
                                <span class="badge bg-danger pull-right">4</span>
                                <span translate="header.navbar.new.EMAIL" class="ng-scope">Email</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-form-sm navbar-left shift ng-pristine ng-valid ng-scope"
                  ui-shift="prependTo" target=".navbar-collapse" role="search" ng-controller="TypeaheadDemoCtrl">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" ng-model="selected"
                               typeahead="state for state in states | filter:$viewValue | limitTo:8"
                               class="form-control input-sm bg-light no-border rounded padder ng-pristine ng-untouched ng-valid"
                               placeholder="Search projects..." aria-autocomplete="list" aria-expanded="false"
                               aria-owns="typeahead-176-587">
                        <ul class="dropdown-menu ng-isolate-scope ng-hide" ng-show="isOpen()"
                            ng-style="{top: position.top+&#39;px&#39;, left: position.left+&#39;px&#39;}"
                            style="display: block;;display: block;" role="listbox" aria-hidden="true" typeahead-popup=""
                            id="typeahead-176-587" matches="matches" active="activeIdx" select="select(activeIdx)"
                            query="query" position="position">
                            <!-- ngRepeat: match in matches track by $index -->
                        </ul>
              <span class="input-group-btn">
                <button type="submit" class="btn btn-sm bg-light rounded"><i class="fa fa-search"></i></button>
              </span>
                    </div>
                </div>
            </form>
            <!-- / link and dropdown -->

            <!-- search form -->

            <!-- / search form -->

            <!-- nabar right -->
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown hidden-sm" is-open="lang.isopen" dropdown="">
                    <a href="" class="dropdown-toggle ng-binding" dropdown-toggle="" aria-haspopup="true"
                       aria-expanded="false">
                        English <b class="caret"></b>
                    </a>
                    <!-- dropdown -->
                    <ul class="dropdown-menu animated fadeInRight w">
                        <!-- ngRepeat: (langKey, label) in langs -->
                        <li ng-repeat="(langKey, label) in langs" class="ng-scope">
                            <a ng-click="setLang(langKey, $event)" href="" class="ng-binding">German</a>
                        </li>
                        <!-- end ngRepeat: (langKey, label) in langs -->
                        <li ng-repeat="(langKey, label) in langs" class="ng-scope">
                            <a ng-click="setLang(langKey, $event)" href="" class="ng-binding">English</a>
                        </li>
                        <!-- end ngRepeat: (langKey, label) in langs -->
                        <li ng-repeat="(langKey, label) in langs" class="ng-scope">
                            <a ng-click="setLang(langKey, $event)" href="" class="ng-binding">Italian</a>
                        </li>
                        <!-- end ngRepeat: (langKey, label) in langs -->
                    </ul>
                    <!-- / dropdown -->
                </li>
                <li class="hidden-xs">
                    <a ui-fullscreen="" class=""><i class="fa fa-expand fa-fw text"></i><i
                            class="fa fa-compress fa-fw text-active"></i></a>
                </li>
                <li class="dropdown" dropdown="">
                    <a href="" class="dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
                        <i class="icon-bell fa-fw"></i>
                        <span class="visible-xs-inline">Notifications</span>
                        <span class="badge badge-sm up bg-danger pull-right-xs">2</span>
                    </a>
                    <!-- dropdown -->
                    <div class="dropdown-menu w-xl animated fadeInUp">
                        <div class="panel bg-white">
                            <div class="panel-heading b-light bg-light">
                                <strong>You have <span>2</span> notifications</strong>
                            </div>
                            <div class="list-group">
                                <a href="" class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="./assets/a0.jpg" alt="..." class="img-circle">
                    </span>
                    <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                                </a>
                                <a href="" class="media list-group-item">
                    <span class="media-body block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
                                </a>
                            </div>
                            <div class="panel-footer text-sm">
                                <a href="" class="pull-right"><i class="fa fa-cog"></i></a>
                                <a href="http://flatfull.com/themes/angulr/angular/#notes"
                                   data-toggle="class:show animated fadeInRight">See all the notifications</a>
                            </div>
                        </div>
                    </div>
                    <!-- / dropdown -->
                </li>
                <li class="dropdown" dropdown="">
                    <a href="" class="dropdown-toggle clear" dropdown-toggle="" aria-haspopup="true"
                       aria-expanded="false">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="./assets/a0.jpg" alt="...">
                <i class="on md b-white bottom"></i>
              </span>
                        <span class="hidden-sm hidden-md">John.Smith</span> <b class="caret"></b>
                    </a>
                    <!-- dropdown -->
                    <ul class="dropdown-menu animated fadeInRight w">
                        <li class="wrapper b-b m-b-sm bg-light m-t-n-xs">
                            <div>
                                <p>300mb of 500mb used</p>
                            </div>
                            <div class="progress-xs m-b-none bg-white progress ng-isolate-scope" value="60">
                                <div class="progress-bar" ng-class="type &amp;&amp; &#39;progress-bar-&#39; + type"
                                     role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                     ng-style="{width: percent + &#39;%&#39;}" aria-valuetext="60%" ng-transclude=""
                                     style="width: 60%;"></div>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <span class="badge bg-danger pull-right">30%</span>
                                <span>Settings</span>
                            </a>
                        </li>
                        <li>
                            <a ui-sref="app.page.profile"
                               href="http://flatfull.com/themes/angulr/angular/#/app/page/profile">Profile</a>
                        </li>
                        <li>
                            <a ui-sref="app.docs" href="./assets/Angular version   Angulr.html">
                                <span class="label bg-info pull-right">new</span>
                                Help
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a ui-sref="access.signin" href="http://flatfull.com/themes/angulr/angular/#/access/signin">Logout</a>
                        </li>
                    </ul>
                    <!-- / dropdown -->
                </li>
            </ul>
            <!-- / navbar right -->

        </div>
        <!-- / navbar collapse --></div>
    <!-- / navbar -->

    <!-- menu -->
    <!-- ngInclude: 'tpl/blocks/aside.html' -->
    <div data-ng-include=" &#39;tpl/blocks/aside.html&#39; " class="app-aside hidden-xs bg-black">
        <div class="aside-wrap ng-scope">
            <!-- if you want to use a custom scroll when aside fixed, use the slimScroll
              <div class="navi-wrap" ui-jq="slimScroll" ui-options="{height:'100%', size:'8px'}">
            -->
            <div class="navi-wrap">
                <!-- user -->
                <div class="clearfix hidden-xs text-center hide" id="aside-user">
                    <div class="dropdown wrapper" dropdown="">
                        <a ui-sref="app.page.profile"
                           href="http://flatfull.com/themes/angulr/angular/#/app/page/profile">
          <span class="thumb-lg w-auto-folded avatar m-t-sm">
            <img src="./assets/a0.jpg" class="img-full" alt="...">
          </span>
                        </a>
                        <a href="" class="dropdown-toggle hidden-folded" dropdown-toggle="" aria-haspopup="true"
                           aria-expanded="false">
          <span class="clear">
            <span class="block m-t-sm">
              <strong class="font-bold text-lt">John.Smith</strong> 
              <b class="caret"></b>
            </span>
            <span class="text-muted text-xs block">Art Director</span>
          </span>
                        </a>
                        <!-- dropdown -->
                        <ul class="dropdown-menu animated fadeInRight w hidden-folded">
                            <li class="wrapper b-b m-b-sm bg-info m-t-n-xs">
                                <span class="arrow top hidden-folded arrow-info"></span>

                                <div>
                                    <p>300mb of 500mb used</p>
                                </div>
                                <div class="progress-xs m-b-none dker progress ng-isolate-scope" value="60"
                                     type="white">
                                    <div class="progress-bar progress-bar-white"
                                         ng-class="type &amp;&amp; &#39;progress-bar-&#39; + type" role="progressbar"
                                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                         ng-style="{width: percent + &#39;%&#39;}" aria-valuetext="60%" ng-transclude=""
                                         style="width: 60%;"></div>
                                </div>
                            </li>
                            <li>
                                <a href="">Settings</a>
                            </li>
                            <li>
                                <a ui-sref="app.page.profile"
                                   href="http://flatfull.com/themes/angulr/angular/#/app/page/profile">Profile</a>
                            </li>
                            <li>
                                <a href="">
                                    <span class="badge bg-danger pull-right">3</span>
                                    Notifications
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a ui-sref="access.signin"
                                   href="http://flatfull.com/themes/angulr/angular/#/access/signin">Logout</a>
                            </li>
                        </ul>
                        <!-- / dropdown -->
                    </div>
                    <div class="line dk hidden-folded"></div>
                </div>
                <!-- / user -->

                <!-- nav -->
                <!-- ngInclude: 'tpl/blocks/nav.html' -->
                <nav ui-nav="" class="navi clearfix ng-scope" ng-include="&#39;tpl/blocks/nav.html&#39;"><!-- list -->
                    <ul class="nav ng-scope">
                        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                            <span translate="aside.nav.HEADER" class="ng-scope">Navigation</span>
                        </li>
                        <li>
                            <a href="" class="auto">      
      <span class="pull-right text-muted">
        <i class="fa fa-fw fa-angle-right text"></i>
        <i class="fa fa-fw fa-angle-down text-active"></i>
      </span>
                                <i class="glyphicon glyphicon-stats icon text-primary-dker"></i>
                                <span class="font-bold ng-scope" translate="aside.nav.DASHBOARD">Dashboard</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href="">
                                        <span translate="aside.nav.DASHBOARD" class="ng-scope">Dashboard</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.dashboard-v1"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/dashboard-v1">
                                        <span>Dashboard v1</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.dashboard-v2"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/dashboard-v2">
                                        <b class="label bg-info pull-right">N</b>
                                        <span>Dashboard v2</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.calendar" href="http://flatfull.com/themes/angulr/angular/#/app/calendar">
                                <i class="glyphicon glyphicon-calendar icon text-info-dker"></i>
                                <span class="font-bold ng-scope" translate="aside.nav.CALENDAR">Calendar</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.mail.list"
                               href="http://flatfull.com/themes/angulr/angular/#/app/mail/inbox/">
                                <b class="badge bg-info pull-right">9</b>
                                <i class="glyphicon glyphicon-envelope icon text-info-lter"></i>
                                <span class="font-bold ng-scope" translate="aside.nav.EMAIL">Email</span>
                            </a>
                        </li>
                        <li>
                            <a href="" class="auto">
      <span class="pull-right text-muted">
        <i class="fa fa-fw fa-angle-right text"></i>
        <i class="fa fa-fw fa-angle-down text-active"></i>
      </span>
                                <i class="glyphicon glyphicon-th-large icon text-success"></i>
                                <span class="font-bold">Apps</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href="">
                                        <span>Apps</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="apps.note" href="http://flatfull.com/themes/angulr/angular/#/apps/note">
                                        <span>Note</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="apps.contact"
                                       href="http://flatfull.com/themes/angulr/angular/#/apps/contact">
                                        <span>Contacts</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.weather"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/weather">
                                        <span>Weather</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="line dk"></li>

                        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                            <span translate="aside.nav.components.COMPONENTS" class="ng-scope">Components</span>
                        </li>
                        <li>
                            <a href="" class="auto">      
      <span class="pull-right text-muted">
        <i class="fa fa-fw fa-angle-right text"></i>
        <i class="fa fa-fw fa-angle-down text-active"></i>
      </span>
                                <b class="badge bg-info pull-right">3</b>
                                <i class="glyphicon glyphicon-th"></i>
                                <span>Layout</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href="">
                                        <span>Layout</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="layout.app"
                                       href="http://flatfull.com/themes/angulr/angular/#/layout/app">
                                        <span>Application</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="layout.fullwidth"
                                       href="http://flatfull.com/themes/angulr/angular/#/layout/fullwidth">
                                        <span>Full width</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="layout.mobile"
                                       href="http://flatfull.com/themes/angulr/angular/#/layout/mobile">
                                        <span>Mobile</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li ng-class="{active:$state.includes(&#39;app.ui&#39;)}">
                            <a href="" class="auto">
      <span class="pull-right text-muted">
        <i class="fa fa-fw fa-angle-right text"></i>
        <i class="fa fa-fw fa-angle-down text-active"></i>
      </span>
                                <i class="glyphicon glyphicon-briefcase icon"></i>
                                <span translate="aside.nav.components.ui_kits.UI_KITS" class="ng-scope">UI Kits</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href="">
                                        <span translate="aside.nav.components.ui_kits.UI_KITS"
                                              class="ng-scope">UI Kits</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.buttons"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/buttons">
                                        <span translate="aside.nav.components.ui_kits.BUTTONS"
                                              class="ng-scope">Buttons</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.icons"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/icons">
                                        <b class="badge bg-info pull-right">3</b>
                                        <span translate="aside.nav.components.ui_kits.ICONS"
                                              class="ng-scope">Icons</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.grid"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/grid">
                                        <span translate="aside.nav.components.ui_kits.GRID" class="ng-scope">Grid</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.widgets"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/widgets">
                                        <b class="badge bg-success pull-right">13</b>
                                        <span translate="aside.nav.WIDGETS" class="ng-scope">Widgets</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.bootstrap"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/bootstrap">
                                        <b class="badge bg-primary pull-right">16</b>
                                        <span translate="aside.nav.components.ui_kits.BOOTSTRAP" class="ng-scope">Bootstrap</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.sortable"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/sortable">
                                        <span translate="aside.nav.components.ui_kits.SORTABLE" class="ng-scope">Sortable</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.portlet"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/portlet">
                                        <span translate="aside.nav.components.ui_kits.PORTLET"
                                              class="ng-scope">Portlet</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.timeline"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/timeline">
                                        <span translate="aside.nav.components.ui_kits.TIMELINE" class="ng-scope">Timeline</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.tree"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/tree">
                                        <span>Tree</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.ui.toaster"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/ui/toaster">
                                        <span>Toaster</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="" class="auto">
          <span class="pull-right text-muted">
            <i class="fa fa-fw fa-angle-right text"></i>
            <i class="fa fa-fw fa-angle-down text-active"></i>
          </span>
                                        <b class="label bg-info pull-right">2</b>
                                        <span>Maps</span>
                                    </a>
                                    <ul class="nav dker">
                                        <li ui-sref-active="active">
                                            <a ui-sref="app.ui.jvectormap"
                                               href="http://flatfull.com/themes/angulr/angular/#/app/ui/jvectormap">
                                                <span translate="aside.nav.components.ui_kits.VECTOR_MAP"
                                                      class="ng-scope">Vector Map</span>
                                            </a>
                                        </li>
                                        <li ui-sref-active="active">
                                            <a ui-sref="app.ui.googlemap"
                                               href="http://flatfull.com/themes/angulr/angular/#/app/ui/googlemap">
                                                <span>Google Map</span>
                                            </a>
                                        </li>

                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li ng-class="{active:$state.includes(&#39;app.table&#39;)}">
                            <a href="" class="auto">
      <span class="pull-right text-muted">
        <i class="fa fa-fw fa-angle-right text"></i>
        <i class="fa fa-fw fa-angle-down text-active"></i>
      </span>
                                <b class="label bg-primary pull-right">2</b>
                                <i class="glyphicon glyphicon-list"></i>
                                <span translate="aside.nav.components.table.TABLE" class="ng-scope">Table</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href="">
                                        <span translate="aside.nav.components.table.TABLE" class="ng-scope">Table</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.table.static"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/table/static">
                                        <span translate="aside.nav.components.table.TABLE_STATIC" class="ng-scope">Table static</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.table.datatable"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/table/datatable">
                                        <span translate="aside.nav.components.table.DATATABLE" class="ng-scope">Datatable</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.table.footable"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/table/footable">
                                        <span translate="aside.nav.components.table.FOOTABLE"
                                              class="ng-scope">Footable</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.table.grid"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/table/grid">
                                        <span>ngGrid</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.table.uigrid"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/table/uigrid">
                                        <span>uiGrid</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.table.editable"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/table/editable">
                                        <span>Editable</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li ng-class="{active:$state.includes(&#39;app.form&#39;)}">
                            <a href="" class="auto">
      <span class="pull-right text-muted">
        <i class="fa fa-fw fa-angle-right text"></i>
        <i class="fa fa-fw fa-angle-down text-active"></i>
      </span>
                                <i class="glyphicon glyphicon-edit"></i>
                                <span translate="aside.nav.components.form.FORM" class="ng-scope">Form</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href="">
                                        <span translate="aside.nav.components.form.FORM" class="ng-scope">Form</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.elements"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/elements">
                                        <span translate="aside.nav.components.form.FORM_ELEMENTS" class="ng-scope">Form elements</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.validation"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/validation">
                                        <span translate="aside.nav.components.form.FORM_VALIDATION" class="ng-scope">Form validation</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.wizard"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/wizard">
                                        <span translate="aside.nav.components.form.FORM_WIZARD" class="ng-scope">Form wizard</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.fileupload"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/fileupload">
                                        <span>File upload</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.imagecrop"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/imagecrop">
                                        <span>Image crop</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.select"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/select">
                                        <span>Select</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.slider"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/slider">
                                        <span>Slider</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.editor"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/editor">
                                        <span>Editor</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.form.xeditable"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/form/xeditable">
                                        <span>Xeditable</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="app.chart" href="http://flatfull.com/themes/angulr/angular/#/app/chart">
                                <i class="glyphicon glyphicon-signal"></i>
                                <span translate="aside.nav.components.CHART" class="ng-scope">Chart</span>
                            </a>
                        </li>
                        <li ng-class="{active:$state.includes(&#39;app.page&#39;)}" class="">
                            <a href="" class="auto">
      <span class="pull-right text-muted">
        <i class="fa fa-fw fa-angle-right text"></i>
        <i class="fa fa-fw fa-angle-down text-active"></i>
      </span>
                                <i class="glyphicon glyphicon-file icon"></i>
                                <span translate="aside.nav.components.pages.PAGES" class="ng-scope">Pages</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href="">
                                        <span translate="aside.nav.components.pages.PAGES" class="ng-scope">Pages</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.page.profile"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/page/profile">
                                        <span translate="aside.nav.components.pages.PROFILE"
                                              class="ng-scope">Profile</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.page.post"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/page/post">
                                        <span translate="aside.nav.components.pages.POST" class="ng-scope">Post</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active" class="">
                                    <a ui-sref="app.page.search"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/page/search">
                                        <span translate="aside.nav.components.pages.SEARCH"
                                              class="ng-scope">Search</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.page.invoice"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/page/invoice">
                                        <span translate="aside.nav.components.pages.INVOICE"
                                              class="ng-scope">Invoice</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.page.price"
                                       href="http://flatfull.com/themes/angulr/angular/#/app/page/price">
                                        <span>Price</span>
                                    </a>
                                </li>
                                <li>
                                    <a ui-sref="lockme" href="http://flatfull.com/themes/angulr/angular/#/lockme">
                                        <span translate="aside.nav.components.pages.LOCK_SCREEN" class="ng-scope">Lock screen</span>
                                    </a>
                                </li>
                                <li>
                                    <a ui-sref="access.signin"
                                       href="http://flatfull.com/themes/angulr/angular/#/access/signin">
                                        <span translate="aside.nav.components.pages.SIGNIN"
                                              class="ng-scope">Signin</span>
                                    </a>
                                </li>
                                <li>
                                    <a ui-sref="access.signup"
                                       href="http://flatfull.com/themes/angulr/angular/#/access/signup">
                                        <span translate="aside.nav.components.pages.SIGNUP"
                                              class="ng-scope">Signup</span>
                                    </a>
                                </li>
                                <li>
                                    <a ui-sref="access.forgotpwd"
                                       href="http://flatfull.com/themes/angulr/angular/#/access/forgotpwd">
                                        <span translate="aside.nav.components.pages.FORGOT_PASSWORD" class="ng-scope">Forgot password</span>
                                    </a>
                                </li>
                                <li>
                                    <a ui-sref="access.404"
                                       href="http://flatfull.com/themes/angulr/angular/#/access/404">
                                        <span translate="aside.nav.components.pages.404" class="ng-scope">404</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="line dk hidden-folded"></li>

                        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                            <span translate="aside.nav.your_stuff.YOUR_STUFF" class="ng-scope">Your Stuff</span>
                        </li>
                        <li>
                            <a ui-sref="app.page.profile"
                               href="http://flatfull.com/themes/angulr/angular/#/app/page/profile">
                                <i class="icon-user icon text-success-lter"></i>
                                <b class="badge bg-success pull-right">30%</b>
                                <span translate="aside.nav.your_stuff.PROFILE" class="ng-scope">Profile</span>
                            </a>
                        </li>
                        <li>
                            <a ui-sref="app.docs" href="./assets/Angular version   Angulr.html">
                                <i class="icon-question icon"></i>
                                <span translate="aside.nav.your_stuff.DOCUMENTS" class="ng-scope">Documents</span>
                            </a>
                        </li>
                    </ul>
                    <!-- / list --></nav>
                <!-- nav -->

                <!-- aside footer -->
                <div class="wrapper m-t">
                    <div class="text-center-folded">
                        <span class="pull-right pull-none-folded">60%</span>
                        <span class="hidden-folded ng-scope" translate="aside.MILESTONE">Milestone</span>
                    </div>
                    <div class="progress-xxs m-t-sm dk progress ng-isolate-scope" value="60" type="info">
                        <div class="progress-bar progress-bar-info"
                             ng-class="type &amp;&amp; &#39;progress-bar-&#39; + type" role="progressbar"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             ng-style="{width: percent + &#39;%&#39;}" aria-valuetext="60%" ng-transclude=""
                             style="width: 60%;"></div>
                    </div>
                    <div class="text-center-folded">
                        <span class="pull-right pull-none-folded">35%</span>
                        <span class="hidden-folded ng-scope" translate="aside.RELEASE">Release</span>
                    </div>
                    <div class="progress-xxs m-t-sm dk progress ng-isolate-scope" value="35" type="primary">
                        <div class="progress-bar progress-bar-primary"
                             ng-class="type &amp;&amp; &#39;progress-bar-&#39; + type" role="progressbar"
                             aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"
                             ng-style="{width: percent + &#39;%&#39;}" aria-valuetext="35%" ng-transclude=""
                             style="width: 35%;"></div>
                    </div>
                </div>
                <!-- / aside footer -->
            </div>
        </div>
    </div>
    <!-- / menu -->

    <!-- content -->
    <div class="app-content ng-scope">
        <div ui-butterbar="" class="butterbar hide"><span class="bar"></span></div>
        <a href="" class="off-screen-toggle hide" ui-toggle-class="off-screen" data-target=".app-aside"></a>
        <!-- uiView:  -->
        <div class="app-content-body fade-in-up ng-scope" ui-view="">
            <div class="hbox hbox-auto-xs hbox-auto-sm ng-scope">
                <!-- .aside -->
                <div class="col w w-auto-xs bg-light inherit dk b-r">
                    <div class="wrapper-md b-b">
                        <a class="btn btn-link pull-right m-t-n-xs m-r-n-sm visible-sm visible-xs"
                           ui-toggle-class="show" data-target="#nav-docs">
                            <i class="fa fa-bars"></i>
                        </a>
                        <span class="h4">Documents</span>
                    </div>
                    <div class="hidden-sm hidden-xs" id="nav-docs">
                        <ul class="nav">
                            <li class="padder b-b l-h-2x bg text-info"><em>Build</em></li>
                            <li><a ui-scroll="node-req">Requirements</a></li>
                            <li><a ui-scroll="bower">Bower</a></li>
                            <li><a ui-scroll="grunt">Grunt</a></li>
                            <li><a ui-scroll="dev-server">Local Server</a></li>

                            <li class="padder b-b l-h-2x bg text-success"><em>CSS</em></li>
                            <li><a ui-scroll="bootstrap">Bootstrap</a></li>
                            <li><a ui-scroll="icons">Icons</a></li>
                            <li><a ui-scroll="animate">Animate</a></li>
                            <li><a ui-scroll="colors">Colors</a></li>
                            <li><a ui-scroll="layout">Layout</a></li>
                            <li><a ui-scroll="utilities">Utilities</a></li>

                            <li ui-scroll="core" class="padder b-b b-t l-h-2x bg text-danger"><em>Core</em></li>
                            <li><a ui-scroll="ui-router">ui-router</a></li>
                            <li><a ui-scroll="ui-load">ui-load</a></li>
                            <li><a ui-scroll="ui-jq">ui-jq</a></li>
                            <li><a ui-scroll="ui-module">ui-module</a></li>
                            <li><a ui-scroll="ui-validate">ui-validate</a></li>

                            <li ui-scroll="directives" class="padder b-b b-t l-h-2x bg text-primary"><em>Directives</em>
                            </li>
                            <li><a ui-scroll="ui-toggle-class">ui-toggle-class</a></li>
                            <li><a ui-scroll="ui-shift">ui-shift</a></li>
                            <li><a ui-scroll="ui-scroll">ui-scroll</a></li>
                            <li><a ui-scroll="ui-fullscreen">ui-fullscreen</a></li>

                            <li ui-scroll="plugins" class="padder b-b b-t l-h-2x bg text-info"><em>Plugins</em></li>
                            <li><a ui-scroll="plugins">Plugins docs</a></li>
                        </ul>
                    </div>
                </div>
                <!-- /.aside -->
                <div class="col">
                    <div class="clearfix padder-md">
                        <h3 class="text-info m-t-xl font-thin m-b-none">Build </h3>

                        <div>Build your project with grunt and manage dependencies with bower.</div>

                        <div id="node-req" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Requirements</h4>

                        <p>
                            In order to utilize <a href="http://gruntjs.com/" class="text-info font-bold">Grunt</a> you
                            will need to have installed <a href="http://nodejs.org/"
                                                           class="text-info font-bold">Node.js</a> on your computer.
                            Also
                            insure that you have <a href="https://www.npmjs.org/" class="text-info font-bold">NPM</a>
                            installed. <br>
                            You can check if these are installed properly by opening up a Terminal (Linux or Mac) or
                            Command Prompt (Windows) <br>
                            and entering the command: <code>node --version</code> and <code>npm --version</code>
                            These commands should output something similar to "v0.10.31" and "1.4.23" respectively.
                        </p>

                        <p>
                            Once you have installed these programs, you'll need to get grunt and bower. You can achieve
                            this by running the following command:
                            <code>npm install -g bower grunt-cli</code> <br>
                            Now you should be able to exectue the commands "grunt" and "bower".
                        </p>

                        <p class="well b bg-light lt wrapper-sm m-t text-danger font-bold">
                            Please note that any commands we tell you to run must be ran from the project's root folder.
                        </p>

                        <div id="bower" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Bower Dependency Management</h4>

                        <p>
                            To ensure you have all updated the Javascript libraries managed by bower, run the command
                            <code>bower install</code> in a terminal or command prompt
                            while you are in the current working directory of the project.
                        </p>

                        <div id="grunt" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Grunt Build Tool</h4>

                        <p>
                            This project supports build steps with Grunt. The supported Grunt tasks that this project
                            ships with is:
                        </p>
                        <ul>
                            <li>Less Compilation</li>
                            <li>Bower Depenecy Inclusion</li>
                            <li>Release Tagging (requires project to be a <a href="http://git-scm.com/"
                                                                             class="text-info font-bold">GIT
                                repository</a>)
                            </li>
                        </ul>
                        <p>
                            To build your project, just run the command <code>grunt build:dev</code>. This will compile
                            your less files and
                            copy over your bower dependencies.
                        </p>

                        <p>
                            Release tagging allows you to bump your current project's version and tag it with git. It
                            also creates a changelog based on your
                            prevoius commit history. Checkout <a href="https://github.com/ericmatthys/grunt-changelog"
                                                                 class="text-info font-bold">the grunt-changelog
                            module</a> for more
                            details and how to customize.
                        </p>

                        <div id="dev-server" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Local Server Development</h4>

                        <p>
                            We've made it easy to develop and test on your local machine. Once you've installed the
                            bower dependencies and built your project,
                            you can start a local server by running the command <code>npm start</code>. This will start
                            a local server and open up your browser.
                        </p>

                        <div id="css" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h3 class="text-success m-t-xl font-thin m-b-none">CSS </h3>

                        <div>Extensible classes</div>

                        <div id="bootstrap" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Bootstrap CSS</h4>

                        <p>
                            For the bootstrap css and components, please check the <a href="http://getbootstrap.com/"
                                                                                      class="text-info font-bold">Bootstrap
                            3</a>
                        </p>

                        <p><strong>Angular UI Bootstrap</strong>, This project does not use bootstrap.js, but use
                            Angular UI Bootstrap written in pure AngularJS, check <a ui-sref="app.ui.bootstrap"
                                                                                     class="text-info font-bold"
                                                                                     href="http://flatfull.com/themes/angulr/angular/#/app/ui/bootstrap">UI
                                Boostrap</a> and <a href="http://angular-ui.github.io/bootstrap"
                                                    class="text-info font-bold">Official Documents</a></p>


                        <div id="less" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">LESS</h4>

                        <p>This file's css is generated by LESS files. There are many Variables, Mixins you can use.</p>

                        <p><strong>Compile</strong>, you can use the less.php to output the css. </p>


                        <div id="icons" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Icons</h4>
                        <ul>
                            <li>FontAwesome icons <label class="label bg-info">4.1</label>

                                <p>Check <strong><a
                                        href="http://fortawesome.github.io/Font-Awesome/">FontAwesome</a></strong> for
                                    more details to see how to use and examples</p></li>
                            <li>Glyphicons <p>Bootstrap default icons</p></li>
                            <li>Simple Line Icons</li>
                        </ul>


                        <div id="animate" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Animate</h4>

                        <p><a href="http://daneden.me/animate/"><strong>animate.css</strong></a> is a bunch of cool,
                            fun, and cross-browser animations for you to use in your projects. Great for emphasis, home
                            pages, sliders, and general just-add-water-awesomeness. </p>

                        <p><strong>Page view transition</strong>, This project also used Animate css for <strong>ui-view
                            animation</strong>, you can use <code>.fade-in, .fade-in-left, .fade-in-right, .fade-in-up,
                            .fade-in-down, .fade-in-right-big, .fade-in-left-big, .fade-in-up-big,
                            .fade-in-down-big</code>, if you want to use the big animation, you can use a
                            <code>.smooth</code> class for smoothing animation.</p>


                        <div id="colors" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Colors</h4>

                        <p><strong>8 default color palettes</strong>, build colorful widgets. you can open the
                            less/app.variables.less to config your own colors(<code>@brand-primary, @brand-success,
                                @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark,
                                @brand-light</code>).
                        </p>

                        <p><strong>Use less file to build your colors</strong>, You can use the mixin wariant. use
                            <code>.color-variant</code> and <code>.font-variant</code> to build the color scheme, check
                            more details in the css/less/app.colors.less.</p>

                        <div class="row">
                            <div class="col-sm-6">
                                <p>.bg-light</p>

                                <div class="m-b">
            <span class="bg-light hbox">
              <span class="col padder-v text-center dker">.dker</span><span
                    class="col padder-v text-center dk">.dk</span><span
                    class="col padder-v text-center bg">.bg</span><span
                    class="col padder-v text-center lt">.lt</span><span
                    class="col padder-v text-center lter">.lter</span>
            </span>
                                </div>
                                <p>.bg-dark</p>

                                <div class="m-b">
            <span class="bg-dark hbox">
              <span class="col padder-v text-center dker">.dker</span><span
                    class="col padder-v text-center dk">.dk</span><span
                    class="col padder-v text-center bg">.bg</span><span
                    class="col padder-v text-center lt">.lt</span><span
                    class="col padder-v text-center lter">.lter</span>
            </span>
                                </div>
                                <p>.bg-black</p>

                                <div class="m-b">
            <span class="bg-black hbox">
              <span class="col padder-v text-center dker">.dker</span><span
                    class="col padder-v text-center dk">.dk</span><span
                    class="col padder-v text-center bg">.bg</span><span
                    class="col padder-v text-center lt">.lt</span><span
                    class="col padder-v text-center lter">.lter</span>
            </span>
                                </div>
                                <p>.bg-primary</p>

                                <div class="m-b">
            <span class="bg-primary hbox">
              <span class="col padder-v text-center dker">.dker</span><span
                    class="col padder-v text-center dk">.dk</span><span
                    class="col padder-v text-center bg">.bg</span><span
                    class="col padder-v text-center lt">.lt</span><span
                    class="col padder-v text-center lter">.lter</span>
            </span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <p>.bg-info</p>

                                <div class="m-b">
            <span class="bg-info hbox">
              <span class="col padder-v text-center dker">.dker</span><span
                    class="col padder-v text-center dk">.dk</span><span
                    class="col padder-v text-center bg">.bg</span><span
                    class="col padder-v text-center lt">.lt</span><span
                    class="col padder-v text-center lter">.lter</span>
            </span>
                                </div>
                                <p>.bg-success</p>

                                <div class="m-b">
            <span class="bg-success hbox">
              <span class="col padder-v text-center dker">.dker</span><span
                    class="col padder-v text-center dk">.dk</span><span
                    class="col padder-v text-center bg">.bg</span><span
                    class="col padder-v text-center lt">.lt</span><span
                    class="col padder-v text-center lter">.lter</span>
            </span>
                                </div>
                                <p>.bg-warning</p>

                                <div class="m-b">
            <span class="bg-warning hbox">
              <span class="col padder-v text-center dker">.dker</span><span
                    class="col padder-v text-center dk">.dk</span><span
                    class="col padder-v text-center bg">.bg</span><span
                    class="col padder-v text-center lt">.lt</span><span
                    class="col padder-v text-center lter">.lter</span>
            </span>
                                </div>
                                <p>.bg-danger</p>

                                <div class="m-b">
            <span class="bg-danger hbox">
              <span class="col padder-v text-center dker">.dker</span><span
                    class="col padder-v text-center dk">.dk</span><span
                    class="col padder-v text-center bg">.bg</span><span
                    class="col padder-v text-center lt">.lt</span><span
                    class="col padder-v text-center lter">.lter</span>
            </span>
                                </div>
                            </div>
                        </div>


                        <div id="layout" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">Layout</h4>

                        <p>
                            <strong>Fix header</strong>, use <code>.app-header-fixed</code> class on ".app" to fixed
                            header.position
                        </p>

                        <p>
                            <strong>Fix aside</strong>, use <code>.app-aside-fixed</code> class on ".app" to fixed aside
                            position.
                        </p>

                        <p>
                            <strong>Fold aside</strong>, use <code>.app-aside-folded</code> class on ".app" to fold
                            aside.
                        </p>

                        <p><strong>Hbox</strong>, use <code>.hbox</code> and <code>.col</code> to build column layout.
                            and you can use the <code>.w-lg, .w-md, .w, .w-sm, .w-xs</code> to fix column width. and use
                            <code>.hbox-auto-sm, .hbox-auto-xs</code> to disable hbox on small screen.</p>

                        <div id="utilities" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">CSS Utilities</h4>
                        <table class="table table-border bg-white-only b-a">
                            <tbody>
                            <tr class="bg-light lt">
                                <td colspan="2">Margin</td>
                            </tr>
                            <tr>
                                <td>.m</td>
                                <td>margin: 15px</td>
                            </tr>
                            <tr>
                                <td>.m-xs</td>
                                <td>margin: 5px</td>
                            </tr>
                            <tr>
                                <td>.m-sm</td>
                                <td>margin: 10px</td>
                            </tr>
                            <tr>
                                <td>.m-md</td>
                                <td>margin: 20px</td>
                            </tr>
                            <tr>
                                <td>.m-lg</td>
                                <td>margin: 30px</td>
                            </tr>
                            <tr>
                                <td>.m-n</td>
                                <td>margin: 0px</td>
                            </tr>
                            <tr>
                                <td>.m-l</td>
                                <td>margin-left: 15px</td>
                            </tr>
                            <tr>
                                <td>.m-l-xs</td>
                                <td>margin-left: 5px</td>
                            </tr>
                            <tr>
                                <td>.m-l-sm</td>
                                <td>margin-left: 10px</td>
                            </tr>
                            <tr>
                                <td>.m-l-md</td>
                                <td>margin-left: 20px</td>
                            </tr>
                            <tr>
                                <td>.m-l-lg</td>
                                <td>margin-left: 30px</td>
                            </tr>
                            <tr>
                                <td>.m-l-xl</td>
                                <td>margin-left: 40px</td>
                            </tr>
                            <tr>
                                <td>.m-l-xxl</td>
                                <td>margin-left: 50px</td>
                            </tr>
                            <tr>
                                <td>.m-l-none</td>
                                <td>margin-left: 0px</td>
                            </tr>
                            <tr>
                                <td>.m-l-n</td>
                                <td>margin-left: -15px</td>
                            </tr>
                            <tr>
                                <td>.m-l-n-xxs</td>
                                <td>margin-left: -1px</td>
                            </tr>
                            <tr>
                                <td>.m-l-n-xs</td>
                                <td>margin-left: -5px</td>
                            </tr>
                            <tr>
                                <td>.m-l-n-sm</td>
                                <td>margin-left: -10px</td>
                            </tr>
                            <tr>
                                <td>.m-l-n-md</td>
                                <td>margin-left: -20px</td>
                            </tr>
                            <tr>
                                <td>.m-l-n-lg</td>
                                <td>margin-left: -30px</td>
                            </tr>
                            <tr>
                                <td>.m-l-n-xl</td>
                                <td>margin-left: -40px</td>
                            </tr>
                            <tr>
                                <td>.m-l-n-xxl</td>
                                <td>margin-left: -50px</td>
                            </tr>
                            <tr>
                                <td colspan="2">.m-r <em>(margin right)</em> , m-t <em>(margin top)</em> , m-b <em>(margin
                                    bottom)</em> have the same classes as the .m-l.
                                </td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Border</td>
                            </tr>
                            <tr>
                                <td>.b-a</td>
                                <td>border:1px solid @border-color(see app.variables.less)</td>
                            </tr>
                            <tr>
                                <td>.b-l</td>
                                <td>border left</td>
                            </tr>
                            <tr>
                                <td>.b-t</td>
                                <td>border top</td>
                            </tr>
                            <tr>
                                <td>.b-r</td>
                                <td>border right</td>
                            </tr>
                            <tr>
                                <td>.b-b</td>
                                <td>border bottom</td>
                            </tr>
                            <tr>
                                <td>.b-light, .b-dark, .b-primary, .b-success, .b-info, .b-warning, .b-danger, .b-black,
                                    .b-white
                                </td>
                                <td>border with specific color.</td>
                            </tr>
                            <tr>
                                <td>.b-2x</td>
                                <td>border width with 2px</td>
                            </tr>
                            <tr>
                                <td>.b-3x</td>
                                <td>border width with 3px</td>
                            </tr>
                            <tr>
                                <td>.no-border</td>
                                <td>border width: 0</td>
                            </tr>
                            <tr>
                                <td>.no-border-xs</td>
                                <td>border width: 0 on etremely small screen.</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Radius</td>
                            </tr>
                            <tr>
                                <td>.r</td>
                                <td>border-radius: @border-radius-base</td>
                            </tr>
                            <tr>
                                <td>.r-l</td>
                                <td>border-radius: @border-radius-base 0 0 @border-radius-base</td>
                            </tr>
                            <tr>
                                <td>.r-r</td>
                                <td>border-radius: 0 @border-radius-base @border-radius-base 0</td>
                            </tr>
                            <tr>
                                <td>.r-t</td>
                                <td>border-radius: @border-radius-base @border-radius-base 0 0</td>
                            </tr>
                            <tr>
                                <td>.r-b</td>
                                <td>border-radius: 0 0 @border-radius-base @border-radius-base</td>
                            </tr>
                            <tr>
                                <td>.r-2x</td>
                                <td>radius size: 2 x @border-radius-base</td>
                            </tr>
                            <tr>
                                <td>.r-3x</td>
                                <td>radius size: 3 x @border-radius-base</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Padder and Wrapper</td>
                            </tr>
                            <tr>
                                <td>.padder</td>
                                <td>padding-left: 15px; padding-right: 15px</td>
                            </tr>
                            <tr>
                                <td>.padder-md</td>
                                <td>padding-left: 20px; padding-right: 20px</td>
                            </tr>
                            <tr>
                                <td>.padder-lg</td>
                                <td>padding-left: 30px; padding-right: 30px</td>
                            </tr>
                            <tr>
                                <td>.no-padder</td>
                                <td>padding: 0</td>
                            </tr>
                            <tr>
                                <td>.wrapper</td>
                                <td>padding: 15px</td>
                            </tr>
                            <tr>
                                <td>.wrapper-sm</td>
                                <td>padding: 10px</td>
                            </tr>
                            <tr>
                                <td>.wrapper-xs</td>
                                <td>padding: 5px</td>
                            </tr>
                            <tr>
                                <td>.wrapper-md</td>
                                <td>padding: 20px</td>
                            </tr>
                            <tr>
                                <td>.wrapper-lg</td>
                                <td>padding: 30px</td>
                            </tr>
                            <tr>
                                <td>.wrapper-xl</td>
                                <td>padding: 50px</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Text</td>
                            </tr>
                            <tr>
                                <td>.text-u-c</td>
                                <td>text uppercase</td>
                            </tr>
                            <tr>
                                <td>.text-l-t</td>
                                <td>text line through</td>
                            </tr>
                            <tr>
                                <td>.text-u-l</td>
                                <td>text under line</td>
                            </tr>
                            <tr>
                                <td>.text-ellipsis</td>
                                <td>display text in one line with ellipsis</td>
                            </tr>
                            <tr>
                                <td>.text-center-xs</td>
                                <td>center text only on extremely small devices</td>
                            </tr>
                            <tr>
                                <td>.text-left-xs</td>
                                <td>align text left only on extremely small devices</td>
                            </tr>
                            <tr>
                                <td>.text-right-xs</td>
                                <td>align text right only on extremely small devices</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Width and Height</td>
                            </tr>
                            <tr>
                                <td>.w-xxl</td>
                                <td>width: 360px</td>
                            </tr>
                            <tr>
                                <td>.w-xl</td>
                                <td>width: 320px</td>
                            </tr>
                            <tr>
                                <td>.w-lg</td>
                                <td>width: 280px</td>
                            </tr>
                            <tr>
                                <td>.w-md</td>
                                <td>width: 240px</td>
                            </tr>
                            <tr>
                                <td>.w</td>
                                <td>width: 200px</td>
                            </tr>
                            <tr>
                                <td>.w-sm</td>
                                <td>width: 158px</td>
                            </tr>
                            <tr>
                                <td>.w-xs</td>
                                <td>width: 90px</td>
                            </tr>
                            <tr>
                                <td>.w-xxs</td>
                                <td>width: 60px</td>
                            </tr>
                            <tr>
                                <td>.w-full</td>
                                <td>width: 100%</td>
                            </tr>
                            <tr>
                                <td>.w-auto-xs</td>
                                <td>width: auto on extremely small screen.</td>
                            </tr>
                            <tr>
                                <td>.h-full</td>
                                <td>height: 100%</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Thumb</td>
                            </tr>
                            <tr>
                                <td>.thumb-xl</td>
                                <td>width: 128px</td>
                            </tr>
                            <tr>
                                <td>.thumb-lg</td>
                                <td>width: 96px</td>
                            </tr>
                            <tr>
                                <td>.thumb-md</td>
                                <td>width: 64px</td>
                            </tr>
                            <tr>
                                <td>.thumb</td>
                                <td>width: 50px</td>
                            </tr>
                            <tr>
                                <td>.thumb-sm</td>
                                <td>width: 48px</td>
                            </tr>
                            <tr>
                                <td>.thumb-xs</td>
                                <td>width: 34px</td>
                            </tr>
                            <tr>
                                <td>.thumb-xxs</td>
                                <td>width: 30px</td>
                            </tr>
                            <tr>
                                <td>.img-full</td>
                                <td>width: 100%</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Avatar</td>
                            </tr>
                            <tr>
                                <td>.avatar</td>
                                <td>circle photo</td>
                            </tr>
                            <tr>
                                <td>status</td>
                                <td>status, '.on', '.off', '.busy', '.away'</td>
                            </tr>
                            <tr>
                                <td>status position</td>
                                <td>status position, '.left', '.right', '.bottom'</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Arrow</td>
                            </tr>
                            <tr>
                                <td>.arrow</td>
                                <td>base class</td>
                            </tr>
                            <tr>
                                <td>.left</td>
                                <td>left arrow, position:middle</td>
                            </tr>
                            <tr>
                                <td>.right</td>
                                <td>right arrow, position:middle</td>
                            </tr>
                            <tr>
                                <td>.top</td>
                                <td>top arrow, position:center</td>
                            </tr>
                            <tr>
                                <td>.bottom</td>
                                <td>bottom arrow, position:center</td>
                            </tr>
                            <tr>
                                <td>.pull-left</td>
                                <td>.top and .bottom arrow with left position</td>
                            </tr>
                            <tr>
                                <td>.pull-right</td>
                                <td>.top and .bottom arrow with right position</td>
                            </tr>
                            <tr>
                                <td>.pull-up</td>
                                <td>.left and .right arrow with up position</td>
                            </tr>
                            <tr>
                                <td>.pull-down</td>
                                <td>.left and .right arrow with down position</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Item</td>
                            </tr>
                            <tr>
                                <td>.item-overlay</td>
                                <td>overlay the element on an item, default display:none, with '.active' class will
                                    show
                                </td>
                            </tr>
                            <tr>
                                <td>.top</td>
                                <td>top element on a item element</td>
                            </tr>
                            <tr>
                                <td>.bottom</td>
                                <td>bottom element on a item element</td>
                            </tr>
                            <tr>
                                <td>.center</td>
                                <td>center element on a item element</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Button</td>
                            </tr>
                            <tr>
                                <td class="w">.btn-rounded</td>
                                <td>rounded button</td>
                            </tr>
                            <tr>
                                <td>.btn-icon</td>
                                <td>icon only button</td>
                            </tr>
                            <tr>
                                <td>.btn-addon</td>
                                <td>icon addon, must have a i tag, and can use .pull-left and .pull-right</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Timeline</td>
                            </tr>
                            <tr>
                                <td class="w">.timeline</td>
                                <td>timeline wrapper class</td>
                            </tr>
                            <tr>
                                <td class="w">.timeline-center</td>
                                <td>timeline with center position</td>
                            </tr>
                            <tr>
                                <td class="w">.tl-item</td>
                                <td>timeline item</td>
                            </tr>
                            <tr>
                                <td class="w">.tl-wrap</td>
                                <td>timeline item wrap</td>
                            </tr>
                            <tr>
                                <td class="w">.tl-date</td>
                                <td>timeline date</td>
                            </tr>
                            <tr>
                                <td class="w">.tl-content</td>
                                <td>timeline content</td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Streamline</td>
                            </tr>
                            <tr>
                                <td class="w">.streamline</td>
                                <td>streamline class</td>
                            </tr>
                            <tr>
                                <td class="w">.sl-item</td>
                                <td>streamline item, you can use .b-l and .b-info, b-danger... class to make it
                                    colorful.
                                </td>
                            </tr>
                            <tr class="bg-light lt">
                                <td colspan="2">Hbox</td>
                            </tr>
                            <tr>
                                <td>.hbox</td>
                                <td>display: table</td>
                            </tr>
                            <tr>
                                <td>.col</td>
                                <td>display: table-cell</td>
                            </tr>
                            <tr>
                                <td>.v-middle</td>
                                <td>vertical align: middle</td>
                            </tr>
                            <tr>
                                <td>.v-top</td>
                                <td>vertical align: top</td>
                            </tr>
                            <tr>
                                <td>.v-bottom</td>
                                <td>vertical align: bottom</td>
                            </tr>
                            </tbody>
                        </table>

                        <div id="core" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h3 class="text-danger font-thin m-t-xl m-b-none">Core</h3>

                        <div>You must know AngularJS, "ui-router" and "ui-jq" to get started your project.</div>

                        <div id="ui-router" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-router</h4>

                        <p>
                            ui-router for <strong>Nested Routing</strong> and <strong>Nested View</strong>, check the <a
                                href="http://angular-ui.github.io/ui-router/" class="text-info">official documents</a>
                        </p>

                        <div id="ui-load" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-load</h4>

                        <p>ui-load for <strong>lazy loading</strong> the js and css files. </p>

                        <p class="well text-black bg-light lter">
                            angular.module('myModule', ['ui.load']);<br><br>
                            uiLoad.load(
                            ['path/style.css', 'path/script.js']
                            ).then(function() {<br>
                            <span class="text-muted m-l">// loaded succesfully.</span><br>
                            }).catch(function() {<br>
                            <span class="text-muted m-l">// There was some error loading the files.</span><br>
                            });<br>
                        </p>

                        <p>ui-load also used in the ui-router <code>resolve:{}</code> for lazy loading Angular
                            Directives, Controllers and Services.</p>

                        <div id="ui-jq" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-jq</h4>

                        <p>
                            <code>ui-jq</code> Call the jQuery function or plugin specified on the element. check the <a
                                href="http://angular-ui.github.io/ui-utils/#/jq" class="text-info">official
                            documents</a>
                        </p>

                        <div id="ui-module" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-module</h4>

                        <p>
                            <code>ui-module</code> Load other dependences for child directive.
                            you need config the dependences in "js/app.js" constant "MODULE_CONFIG".
                            <br>example: check the "ui-select2" directive on "form/element"
                        </p>

                        <div id="ui-validate" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-validate</h4>

                        <p>
                            The <code>ui-validate</code> directive makes it very easy to create custom validator
                            expressions. check the <a href="http://angular-ui.github.io/ui-utils/#/validate"
                                                      class="text-info">official documents</a>
                        </p>

                        <div id="directives" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h3 class="text-primary font-thin m-t-xl m-b-none">Directives</h3>

                        <div id="ui-toggle-class" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-toggle-class</h4>

                        <p>
                            Toggle class when click on the element, attr <code>target</code> for target element.
                            <code>&lt;div ui-toggle-class="show" target="#nav"&gt;&lt;/div&gt;</code>
                        </p>

                        <div id="ui-shift" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-shift</h4>

                        <p>
                            Shift element on xs screen, attr <code>target</code> for target element.
                            <code>&lt;div ui-shift="append" target="#nav"&gt;&lt;/div&gt;</code>
                        </p>

                        <div id="ui-scroll" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-scroll</h4>

                        <p>
                            Scroll to element when click, attr value for target element.
                            <code>&lt;a ui-scroll="target"&gt;&lt;/a&gt;</code>
                        </p>

                        <div id="ui-fullscreen" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h4 class="m-t-xl">ui-fullscreen</h4>

                        <p>
                            Request fullscreen mode for element.
                            <code>&lt;a ui-fullscreen&gt;&lt;/a&gt;</code> or <code>&lt;a ui-fullscreen target="#target"&gt;&lt;/a&gt;</code>
                        </p>

                        <div id="plugins" class="wrapper"></div>
                        <div class="line b-b"></div>
                        <h3 class="text-info font-thin m-t-xl m-b-lg">Plugins</h3>

                        <p>All jQuery plugins are depended on <code>ui-jq</code>, do not need create the Angular
                            Directive for each of the plugin. you can config in the js/app.js Angular Constant <code>JQ_CONFIG</code>,
                            <code>functionName =&gt; pluginPath</code>, the js and css files are lazy loaded.</p>

                        <div class="row m-b-xl">
                            <div class="col-md-6">
                                <h4 class="m-t-md">FullCalendar</h4>

                                <p>Check the online <a href="http://arshaw.com/fullcalendar/"><strong>document</strong></a>
                                    and <a href="http://angular-ui.github.io/ui-calendar/"><strong>Angular Fullcalendar
                                        Wrapper</strong></a></p>

                                <h4 class="m-t-md">Datatables</h4>

                                <p>Check the online <a href="http://datatables.net/"><strong>document</strong></a>. </p>

                                <h4 class="m-t-md">Chosen</h4>

                                <p>Check the online <a
                                        href="http://github.com/harvesthq/chosen"><strong>document</strong></a>. </p>

                                <h4 class="m-t-md">File-input</h4>

                                <p>Check the online <a
                                        href="http://dev.tudosobreweb.com.br/bootstrap-filestyle/"><strong>document</strong></a>.
                                </p>

                                <h4 class="m-t-md">Slider</h4>

                                <p>Check the online <a
                                        href="http://www.eyecon.ro/bootstrap-slider"><strong>document</strong></a>.</p>

                                <h4 class="m-t-md">TouchSpin</h4>

                                <p>Check the online <a
                                        href="http://www.virtuosoft.eu/code/bootstrap-touchspin/"><strong>document</strong></a>.
                                </p>

                                <h4 class="m-t-md">WYSISYG</h4>

                                <p>Check the online <a href="http://github.com/mindmup/bootstrap-wysiwyg"><strong>document</strong></a>.
                                </p>
                            </div>
                            <div class="col-md-6">

                                <h4 class="m-t-md">Flotchart</h4>

                                <p>Check the online <a href="http://www.flotcharts.org/"><strong>document</strong></a>.
                                </p>

                                <h4 class="m-t-md">Sparklines</h4>

                                <p>Check the online <a
                                        href="http://omnipotent.net/jquery.sparkline"><strong>document</strong></a>.
                                </p>

                                <h4 class="m-t-md">Easy pie chart</h4>

                                <p>Check the online <a
                                        href="http://rendro.github.io/easy-pie-chart"><strong>document</strong></a>.
                                </p>

                                <h4 class="m-t-md">Sortable</h4>

                                <p>Check the online <a
                                        href="http://farhadi.ir/projects/html5sortable"><strong>document</strong></a>.
                                </p>

                                <h4 class="m-t-md">Nestable</h4>

                                <p>Check the online <a
                                        href="http://dbushell.github.io/Nestable/"><strong>document</strong></a>. </p>

                                <h4 class="m-t-md">SlimScroll</h4>

                                <p>Check the online <a href="http://rocha.la/"><strong>document</strong></a>. </p>

                                <h4 class="m-t-md">JvectorMap</h4>

                                <p>Check the online <a href="http://jvectormap.com/"><strong>document</strong></a>. </p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /content -->

    <!-- aside right -->
    <div class="app-aside-right pos-fix no-padder w-md w-auto-xs bg-white b-l animated fadeInRight hide ng-scope">
        <div class="vbox">
            <div class="wrapper b-b b-t b-light m-b">
                <a href="" class="pull-right text-muted text-md" ui-toggle-class="show" target=".app-aside-right"><i
                        class="icon-close"></i></a>
                Chat
            </div>
            <div class="row-row">
                <div class="cell">
                    <div class="cell-inner padder">
                        <!-- chat list -->
                        <div class="m-b">
                            <a href="" class="pull-left thumb-xs avatar"><img
                                    src="./assets/a2.jpg" alt="..."></a>

                            <div class="clear">
                                <div class="pos-rlt wrapper-sm b b-light r m-l-sm">
                                    <span class="arrow left pull-up"></span>

                                    <p class="m-b-none">Hi John, What's up...</p>
                                </div>
                                <small class="text-muted m-l-sm"><i class="fa fa-ok text-success"></i> 2 minutes ago
                                </small>
                            </div>
                        </div>
                        <div class="m-b">
                            <a href="" class="pull-right thumb-xs avatar"><img
                                    src="./assets/a3.jpg" class="img-circle" alt="..."></a>

                            <div class="clear">
                                <div class="pos-rlt wrapper-sm bg-light r m-r-sm">
                                    <span class="arrow right pull-up arrow-light"></span>

                                    <p class="m-b-none">Lorem ipsum dolor :)</p>
                                </div>
                                <small class="text-muted">1 minutes ago</small>
                            </div>
                        </div>
                        <div class="m-b">
                            <a href="" class="pull-left thumb-xs avatar"><img
                                    src="./assets/a2.jpg" alt="..."></a>

                            <div class="clear">
                                <div class="pos-rlt wrapper-sm b b-light r m-l-sm">
                                    <span class="arrow left pull-up"></span>

                                    <p class="m-b-none">Great!</p>
                                </div>
                                <small class="text-muted m-l-sm"><i class="fa fa-ok text-success"></i>Just Now</small>
                            </div>
                        </div>
                        <!-- / chat list -->
                    </div>
                </div>
            </div>
            <div class="wrapper m-t b-t b-light">
                <form class="m-b-none ng-pristine ng-valid">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Say something">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">SEND</button>
            </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- / aside right -->

    <!-- footer -->
    <div class="app-footer wrapper b-t bg-light ng-scope">
        <span class="pull-right ng-binding">2.0.0 <a href="" ui-scroll="app" class="m-l-sm text-muted"><i
                class="fa fa-long-arrow-up"></i></a></span>
        © 2015 Copyright.
    </div>
    <!-- / footer -->

    <!-- ngInclude: 'tpl/blocks/settings.html' -->
    <div data-ng-include=" &#39;tpl/blocks/settings.html&#39; " class="settings panel panel-default ng-scope">
        <!-- settings -->
        <button class="btn btn-default no-shadow pos-abt ng-scope" ui-toggle-class="active" target=".settings">
            <i class="fa fa-spin fa-gear"></i>
        </button>
        <div class="panel-heading ng-scope">
            Settings
        </div>
        <div class="panel-body ng-scope">
            <div class="m-b-sm">
                <label class="i-switch bg-info pull-right">
                    <input type="checkbox" ng-model="app.settings.headerFixed"
                           class="ng-pristine ng-untouched ng-valid">
                    <i></i>
                </label>
                Fixed header
            </div>
            <div class="m-b-sm">
                <label class="i-switch bg-info pull-right">
                    <input type="checkbox" ng-model="app.settings.asideFixed" class="ng-pristine ng-untouched ng-valid">
                    <i></i>
                </label>
                Fixed aside
            </div>
            <div class="m-b-sm">
                <label class="i-switch bg-info pull-right">
                    <input type="checkbox" ng-model="app.settings.asideFolded"
                           class="ng-pristine ng-untouched ng-valid">
                    <i></i>
                </label>
                Folded aside
            </div>
            <div class="m-b-sm">
                <label class="i-switch bg-info pull-right">
                    <input type="checkbox" ng-model="app.settings.asideDock" class="ng-pristine ng-untouched ng-valid">
                    <i></i>
                </label>
                Dock aside
            </div>
            <div>
                <label class="i-switch bg-info pull-right">
                    <input type="checkbox" ng-model="app.settings.container" class="ng-pristine ng-untouched ng-valid">
                    <i></i>
                </label>
                Boxed layout
            </div>
        </div>
        <div class="wrapper b-t b-light bg-light lter r-b ng-scope">
            <div class="row row-sm">
                <div class="col-xs-6">
                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-black&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-white-only&#39;; 
          app.settings.asideColor=&#39;bg-black&#39;;
         ">
                        <input type="radio" name="a" ng-model="app.settings.themeID" value="1"
                               class="ng-pristine ng-untouched ng-valid">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-black header"></b>
            <b class="bg-white header"></b>
            <b class="bg-black"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-dark&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-white-only&#39;; 
          app.settings.asideColor=&#39;bg-dark&#39;;
         ">
                        <input type="radio" name="a" ng-model="app.settings.themeID" value="13"
                               class="ng-pristine ng-untouched ng-valid">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-dark header"></b>
            <b class="bg-white header"></b>
            <b class="bg-dark"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-white-only&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-white-only&#39;; 
          app.settings.asideColor=&#39;bg-black&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="2"
                               class="ng-pristine ng-untouched ng-valid" name="185">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-white header"></b>
            <b class="bg-white header"></b>
            <b class="bg-black"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-primary&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-white-only&#39;; 
          app.settings.asideColor=&#39;bg-dark&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="3"
                               class="ng-pristine ng-untouched ng-valid" name="186">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-primary header"></b>
            <b class="bg-white header"></b>
            <b class="bg-dark"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-info&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-white-only&#39;; 
          app.settings.asideColor=&#39;bg-black&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="4"
                               class="ng-pristine ng-untouched ng-valid" name="187">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-info header"></b>
            <b class="bg-white header"></b>
            <b class="bg-black"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-success&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-white-only&#39;; 
          app.settings.asideColor=&#39;bg-dark&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="5"
                               class="ng-pristine ng-untouched ng-valid" name="188">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-success header"></b>
            <b class="bg-white header"></b>
            <b class="bg-dark"></b>
          </span>
                    </label>

                    <label class="i-checks block" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-danger&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-white-only&#39;; 
          app.settings.asideColor=&#39;bg-dark&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="6"
                               class="ng-pristine ng-untouched ng-valid" name="189">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-danger header"></b>
            <b class="bg-white header"></b>
            <b class="bg-dark"></b>
          </span>
                    </label>
                </div>
                <div class="col-xs-6">
                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-black&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-black&#39;; 
          app.settings.asideColor=&#39;bg-white b-r&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="7"
                               class="ng-pristine ng-untouched ng-valid" name="190">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-black header"></b>
            <b class="bg-black header"></b>
            <b class="bg-white"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-dark&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-dark&#39;; 
          app.settings.asideColor=&#39;bg-light&#39;;
         ">
                        <input type="radio" name="a" ng-model="app.settings.themeID" value="14"
                               class="ng-pristine ng-untouched ng-valid">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-dark header"></b>
            <b class="bg-dark header"></b>
            <b class="bg-light"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-info dker&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-info dker&#39;; 
          app.settings.asideColor=&#39;bg-light dker b-r&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="8"
                               class="ng-pristine ng-untouched ng-valid" name="191">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-info dker header"></b>
            <b class="bg-info dker header"></b>
            <b class="bg-light dker"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-primary&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-primary&#39;; 
          app.settings.asideColor=&#39;bg-dark&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="9"
                               class="ng-pristine ng-untouched ng-valid" name="192">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-primary header"></b>
            <b class="bg-primary header"></b>
            <b class="bg-dark"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-info dker&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-info dk&#39;; 
          app.settings.asideColor=&#39;bg-black&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="10"
                               class="ng-pristine ng-untouched ng-valid" name="193">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-info dker header"></b>
            <b class="bg-info dk header"></b>
            <b class="bg-black"></b>
          </span>
                    </label>

                    <label class="i-checks block m-b" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-success&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-success&#39;;
          app.settings.asideColor=&#39;bg-dark&#39;;
          ">
                        <input type="radio" ng-model="app.settings.themeID" value="11"
                               class="ng-pristine ng-untouched ng-valid" name="194">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-success header"></b>
            <b class="bg-success header"></b>
            <b class="bg-dark"></b>
          </span>
                    </label>

                    <label class="i-checks block" ng-click="
          app.settings.navbarHeaderColor=&#39;bg-danger dker bg-gd&#39;; 
          app.settings.navbarCollapseColor=&#39;bg-danger dker bg-gd&#39;; 
          app.settings.asideColor=&#39;bg-dark&#39;;
         ">
                        <input type="radio" ng-model="app.settings.themeID" value="12"
                               class="ng-pristine ng-untouched ng-valid" name="195">
          <span class="block bg-light clearfix pos-rlt">
            <span class="active pos-abt w-full h-full bg-black-opacity text-center">
              <i class="glyphicon glyphicon-ok text-white m-t-xs"></i>
            </span>
            <b class="bg-danger dker header"></b>
            <b class="bg-danger dker header"></b>
            <b class="bg-dark"></b>
          </span>
                    </label>
                </div>
            </div>
        </div>
        <!-- /settings --></div>
</div>

</body>
</html>